import React, {PureComponent} from 'react';
import FormCore from '../../../components/display/form/formCore';
import PropTypes from 'prop-types';
import moment from 'moment';
import {initModals} from "../../../state/action/comAction";
import {getRoleList} from "../../../fetch/fetchApi";

class VertForm extends PureComponent {
  constructor (props) {
    super(props);
    this.props = props;
    this.layout = [
      'inline', // 横向布局
      'vertical', // 弹窗布局
      'horizontal' // 纵向布局
    ];
  }

  static contextTypes = {
    store: PropTypes.object.isRequired
  }

  componentWillMount () {
    // 配置formItem的构建信息
    this.formConfig = {
        childItems: [
          {
            type: 'input', // 定义表单元素基础类型
            inputType: 'text', // 定义表单元素的子类型
            param: { // 定义表单元素的参数对象
              name: 'stubGroupId', // 参数名称
              type: 'string' // 参数类型，用来做类型检测
            },
            labelName: '桩群ID', // label名称
            defaultValue: '20170913021', // 设置默认值，同设置disabled则不能修改
            disabled: true, // 功能类似于defaultParams
            radio: { // 设置参数选择器， checked为true则会封装到提交参数对象中
              radioGroup: 'only', // radioGroup 为选择组，相同的radioGroup为一组
              checked: !0
            }
          },
          {
            type: 'autoWatch',
            param: {
              name: 'autoRoles', // 提交的参数
              type: 'string'
            },
            labelName: '自动联想',
            placeholder: '请输入内容',
            required: !0,
            showParam: 'title', // 展示的条目参数
            choseParam: 'id', // 选中的参数
            sourceApi: getRoleList // 选项接口
          },
          {
            type: 'areaPicker', // 地区选择组件
            isPickArea: !0, // 设置是否需要选择到区一级
            placeholder: '请选择安装城市',
            pickOnSelect: true, //是否选择即改变
            param: {
              name: 'city',
              type: 'array'
            },
            required: !1, // 注意带有条件radio的formItem，不可以设置为必填
            labelName: '安装城市',
            radio: {
              radioGroup: 'only',
              checked: !1
            }
          },
          {
            type: 'radio',
            labelName: '电桩类型',
            param: {
              name: 'stubType',
              type: 'string'
            },
            options: [
              {
                text: '公桩',
                value: '0'
              },
              {
                text: '私桩',
                value: '1'
              }
            ],
            required: !0
          },
          {
            type: 'input',
            inputType: 'text',
            placeholder: '我由对应信息控制显示',
            param: {
              name: 'username',
              type: 'string'
            },
            required: !0,
            validator: { // 自定义校验对象
              vtype: 'length', // 校验名称
              min_val: 4, // 规则参数
              max_val: 20
            },
            labelName: '报修人',
            visibleRule: { // 显示规则
              name: 'selectInfo', // 受影响的参数名称
              value: '1' // 设置显示规则，根据触发组件的paramName的变化来设置规则
            }
          },
          {
            type: 'date',
            dateType: 'pickDate',
            placeholder: '请选择安装日期',
            param: {
              name: 'installDate',
              type: 'object'
            },
            defaultValue: moment('2018-09-09'), // 设置默认日期
            range: [3, 0], // 3 为从今天往前推3天， 0 为今天
            labelName: '安装日期',
            required: !0
          },
          {
            type: 'date',
            dateType: 'pickDateTime',
            placeholder: '我由电桩类型控制',
            param: {
              name: 'installDateTime',
              type: 'object'
            },
            labelName: '日期带时间',
            visibleRule: {
              name: 'stubType',
              value: '1' // 设置显示规则，根据触发组件的paramName的变化来设置规则
            }
          },
          {
            type: 'date',
            dateType: 'rangeDate',
            placeholder: '请选择日期范围',
            param: {
              name: 'dateScope',
              type: 'array'
            },
            range: [3, -7],
            labelName: '日期范围',
            required: !0
          },
          {
            type: 'date',
            dateType: 'rangeDateTime',
            param: {
              name: 'dateScopeTime',
              type: 'array'
            },
            labelName: '日期范围带时间',
            radio: {
              radioGroup: 'only2', // 设置选择组
              checked: !1
            }
          },
          {
            type: 'input',
            inputType: 'tel',
            placeholder: '请输入手机号码',
            param: {
              name: 'phone',
              type: 'string'
            },
            validator: {
              vtype: 'phone'
            },
            labelName: '联系电话',
            radio: {
              radioGroup: 'only2',
              checked: !0
            }
          },
          {
            type: 'select',
            options: [
              {
                text: '小明',
                value: '1'
              },
              {
                text: '小黄',
                value: '2'
              }
            ],
            placeholder: '请选择对应信息',
            param: {
              name: 'selectInfo',
              type: 'string'
            },
            required: !0,
            labelName: '对应信息'
          },
          {
            type: 'select',
            selectType: 'multiple', // 可用于替代checkbox
            placeholder: '请选择多个项目',
            param: {
              name: 'projectNames',
              type: 'array'
            },
            required: !0,
            labelName: '对应项目',
            options: [
              {
                text: 'oms',
                value: '1'
              },
              {
                text: 'saas',
                value: '2'
              },
              {
                text: 'app',
                value: '3'
              }
            ]
          },
          {
            type: 'input',
            inputType: 'text',
            placeholder: '请输入code',
            labelName: '验证码',
            param: {
              name: 'telCode',
              type: 'string'
            },
            required: !0,
            button: { // form元素后带单独执行的按钮并定义执行函数
              name: '发送',
              style: 'primary',
              handler: (e, form) => {
                console.log(form); // 核心组件对象
                console.log('发送成功');
                this.context.store.dispatch(initModals(!0));
              }
            }
          },
          {
            type: 'switch',
            param: {
              name: 'hasToken',
              type: 'boolean'
            },
            required: !0,
            defaultValue: !1,
            validator: { // check校验，一般用来做switch校验
              vtype: 'check'
            },
            labelName: '是否可用签名token',
            isbr: !0
          },
          {
            type: 'buttonGp', // 表单最终执行组
            buttonArr: [
              {
                btnType: 'submit',
                text: '查询'
              },
              {
                btnType: 'reset',
                text: '清空'
              },
              {
                btnType: 'button',
                text: '新增',
                handler: (e) => {
                  console.log(this); //当前上下文
                  console.log(e); // 暴露核心组件对象
                  // 通过公共状态维护modal开关
                  // 打开一个formModal
                  this.context.store.dispatch(initModals('demoModal', !0));
                }
              }
            ]
          },
        ], // 设置表单元素
        layout: this.layout[0], // 设置布局 0： 横向布局， 1：弹窗布局 2： 全页表单布局
        formTarget: 'grid', // 表单提交类型，设置grid则为更新grid
        defaultParams: { // 多个默认参数可以在这里设置，不需要使用disabled
          id: '201788888',
          defaultName: '123123'
        },
        context: this
      };
  }

  fetchApi (param) {
    // 当设置formTarget为ajax时，执行自定义提交事件。
    if (this.formConfig.formTarget === 'grid') {
      return;
    }
    // 请求fetch 对象，带入生成参数
    // 如果在modal中的表单提交，请执行这里
    if (this.props.modalSubmit) {
      return this.props.modalSubmit(param);
    } else {
      // 如果正常页面中的表单提交，请执行下面
      // TODO 执行异步请求或其他
      return;
    }
  }

  render () {
    return <FormCore formConfig={this.formConfig} fetchApi={this.fetchApi.bind(this)}/>
  }
}

export default VertForm;

VertForm.propsType = {
  layout: PropTypes.string,
  modalSubmit: PropTypes.func
}
